<template>
    <div class="history">
        <div class="crumbs">
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item> <i class="el-icon-folder" style="margin-right:10px"></i>项目部管理 </el-breadcrumb-item>
                <el-breadcrumb-item>进行中项目</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div v-if="types == 0 || types == 1 || types == 2 || types == 'null'">
            <div class="container">
                <div class="handle-box">
                    <div class="title">进行中项目</div>
                    <div>
                        <el-button type="primary" class="titleBtn1 exportBtn" @click="toexel">
                            导出
                        </el-button>
                    </div>
                    <div class="searchBox">
                        <div class="prjectName mr20" style="padding-left:40px">
                            <span class="name">项目名称</span>
                            <el-input class="handle-select mr10" placeholder="请输入" v-model="query.name"></el-input>
                        </div>
                        <div class="prjectName mr20">
                            <span class="name">项目类型</span>
                            <el-cascader
                                class="handle-select mr10"
                                v-model="category"
                                :options="options"
                                :props="{ expandTrigger: 'hover' }"
                                @change="handleChange"
                            ></el-cascader>
                        </div>
                        <div class="stateTime mr20">
                            <span class="name">开始时间</span>
                            <el-date-picker
                                class="handle-select"
                                v-model="query.startdate"
                                type="date"
                                value-format="yyyy-MM-dd"
                                placeholder="请选择"
                            ></el-date-picker>
                        </div>
                        <el-button class="titleBtn" type="primary" @click="handleSearch">查询</el-button>
                        <el-button class="titleBtn1" type="primary" @click="reset">重置</el-button>
                    </div>
                </div>
                <div class="selectMonthBox">
                    <el-button
                        class="monthItem"
                        :class="{ timeChecked: isClick == index }"
                        @click="isChecked(index, item.id)"
                        v-for="(item, index) in tableHeadList"
                        :key="item.id"
                        :style="{marginLeft:index==0?'0px':'0'}"
                    >
                        {{ item.modelName }}/{{ item.number || 0 }}
                    </el-button>
                </div>
                <div class="tableBox">
                    <table id="table" style="width:100%">
                        <thead>
                            <tr>
                                <th class="tableTitle">项目ID</th>
                                <th class="tableTitle">项目名称</th>
                                <th class="tableTitle">开工时间</th>
                                <th class="tableTitle">工期</th>
                                <th class="tableTitle">合同总产值</th>
                                <th class="tableTitle">预算金额</th>
                                <th class="tableTitle">已使用</th>
                                <th class="tableTitle">比例</th>
                                <th class="tableTitle" v-for="(item, index) in tableData.titleList" :key="index">{{ item }}</th>
                                <th class="tableTitle">月报情况</th>
                                <!-- <th class="tableTitle">实际利润率</th> -->
                                <th class="tableTitle">实际操作</th>
                            </tr>
                        </thead>
                        <tbody class="tabletbody">
                            <tr v-for="(user, index) in tableData.projectList" :class="index % 2 == 0 ? 'tr1' : 'tr2'" :key="index">
                                <td style="text-align:center;">
                                    <el-tooltip class="item" effect="dark" :content="user.projectid" placement="top">
                                        <div class="cell el-tooltip" style="width: 111px;">
                                            {{ user.projectid }}
                                        </div>
                                    </el-tooltip>
                                </td>
                                <td style="text-align:center;">
                                    <el-tooltip class="item" effect="dark" :content="user.projectname" placement="top">
                                        <div class="cell el-tooltip" style="width: 105px;">{{ user.projectname }}</div>
                                    </el-tooltip>
                                </td>
                                <td style="text-align:center;">{{ user.startdate }}</td>
                                <td style="text-align:center;">
                                    <span v-if="user.period">{{ user.period }}个月</span>
                                </td>
                                <td style="text-align:center;">
                                    <span v-if="user.contractvalue">{{ user.contractvalue }}万</span>
                                </td>
                                <td style="text-align:center;">
                                    <span v-if="user.budgetAmount">{{ user.budgetAmount }}万</span>
                                </td>
                                <td style="text-align:center;">
                                    <span v-if="user.isUse">{{ user.isUse }}万</span>
                                </td>
                                <td style="text-align:center;">
                                    <span v-if="user.scale">{{ user.scale }}%</span>
                                </td>
                                <td style="text-align:center;" v-for="(item, index) in user.decompositionList" :key="index">{{ item }}</td>
                                <td style="text-align:center;">{{ isState(user.monthlyReport) }}</td>
                                <!-- <td style="text-align:center;">
                                    <span v-if="user.profit">{{ user.profit }}%</span>
                                </td> -->
                                <td style="text-align:center;width:108px;">
                                    <el-button type="text" @click="handleDetail(index, user)">细化分解</el-button>
                                    <el-button type="text" @click="accomplish(index, user)">完成</el-button>
                                </td>
                            </tr>
                            <tr style="height:60px;" v-if="tableData && tableData.projectList && tableData.projectList.length == 0">
                                <td style="text-align:center;" colspan="11">
                                    <div style="white-space:nowrap;height:44px;line-height:44px;cursor:pointer;">
                                        <span style="margin-left:11px;font-size:13px;color:#333;width:200px;">暂无数据</span>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="pagination">
                    <el-pagination
                        background
                        layout=" prev, pager, next"
                        :current-page="query.page"
                        :page-size="pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                    ></el-pagination>
                </div>
            </div>

            <!-- 项目细化分解表 -->
            <el-dialog title="项目细化分解表" :visible.sync="projectDetailVisible" width="70%" custom-class="output" :lock-scroll="false">
                <div class="selectMonthBox">
                    <el-button
                        class="monthItem"
                        :class="{ timeChecked: montClick == index }"
                        @click="isCheckedmonth(item, index)"
                        v-for="(item, index) in monthList"
                        :key="index"
                    >
                        <i v-if="item.needVerify" class="el-icon-warning" style="color:#F5A623"></i>
                        {{ item.month }}
                    </el-button>
                    <el-button
                        v-if="showPlus"
                        class="monthItem"
                        :class="{ timeChecked: montClick == monthList.length }"
                        @click="isCheckedmonth('+', monthList.length)"
                        >+</el-button
                    >
                    <el-button class="titleBtn crps" type="primary" @click="toexel2">导出</el-button>
                    <el-button v-if="showVerify" class="titleBtn crps" type="primary" @click="confirmReview">确认评审</el-button>
                </div>
                <el-table
                    :data="specifyList"
                    style="width: 100%;margin-bottom: 20px;"
                    row-key="id"
                    border
                    default-expand-all
                    :tree-props="{ children: 'modelList', hasChildren: 'hasChildren' }"
                    :cell-style="columnStyle"
                >
                    <el-table-column label="分类名称" width="260">
                        <template slot-scope="scope">
                            <span style="margin-left: 10px">
                                {{ scope.row.oneLevelName || scope.row.twoLevelName || scope.row.threeLevelName }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="预算金额">
                        <template slot-scope="scope">
                            <span>{{ scope.row.budgetAmount }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="已使用">
                        <template slot-scope="scope">
                            <span>{{ scope.row.isUse }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="上报人" v-if="montClick == 0">
                        <template slot-scope="scope">
                            <span>{{ scope.row.reportPer }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="本月费用" v-if="montClick != 0">
                        <template slot-scope="scope">
                         
                            <input
                                class="td-input"
                                
                                v-model.number="scope.row.monthCost"
                                :disabled="scope.row.needReport==0?true:false"
                                oninput="value=value.replace(/[^\d.]/g, '').replace(/^\./g, '')"
                                maxlength="200"
                            />
                        </template>
                    </el-table-column>
                    <el-table-column label="余额" v-if="montClick != 0">
                        <template slot-scope="scope">
                            <span>{{ scope.row.over }}</span>
                        </template>
                    </el-table-column>

                    <el-table-column label="最后上报时间" v-if="montClick == 0">
                        <template slot-scope="scope">
                            <span>{{ scope.row.reportTime }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="确认" v-if="showVerify">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.state" :disabled="scope.row.needVerify==0?true:false">
                              <!-- <el-option  label="请选择" value="0"></el-option> -->
                                <el-option v-for="item in stateList" :key="item.value" :label="item.name" :value="item.value" ></el-option>
                            </el-select>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="bottomDiv">
                    <el-button v-if="showConfirm" class="titleBtn" type="primary" @click="addMonthlyReport">确 认</el-button>
                </div>
            </el-dialog>
        </div>
        <div v-else-if="types == 3">
            <vsubmit></vsubmit>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import {
    projectlist,
    findAll,
    commongetCategoryList,
    getModelList,
    projectgetMonthlyReportTitleList,
    projectspecifyList,
    projectVerifyl,
    projectaddMonthlyReport,
    projectupdateMonthlyReport,
    projectcomplete,
    commonjudgeExportRole,
    projectgetReportModel
} from '@/api/index';
import vsubmit from './doingProjectFail';
export default {
    name: 'basetable',
    data() {
        return {
            category: '', //项目类型
            query: {
                page: 1,
                type: 1
            },
            pageTotal: 0,
            pageSize: 10,
            tableData: [], //列表数据
            projectDetailVisible: false, //细化分解弹窗显示隐藏
            monthList: [], //月报列表
            specifyListTitle: [], // 细化分解项列表头
            showVerify: false, // 确认评审显示因残
            showConfirm: false, // 确认修改
            stateList: [
                {
                    name: '请选择',
                    value: 0
                },
                {
                    name: '通过',
                    value: 1
                },
                {
                    name: '不通过',
                    value: 2
                }
            ], // 评审状态
            specifyList: [], //细化分解项列表
            isClick: 0, //当前选择的模板
            montClick: 0, //当前选择的月份
            tableHeadList: [], //模板列表
            modelId: '', //模板id
            options: [], //项目类型
            clickRow: {}, // 点击细化分解的row对象
            // showConfirm: 0, //修改、新增月报确认按钮状态
            types: localStorage.getItem('type'),
            MonthlyReport: '', //月报新增修改状态0新增1修改
            showPlus: false //显示上报'+'判断条件
        };
    },
    created() {
        // 获取列表数据
        // this.getData();
        // 获取模板列表
        this.getmodellistFunc();
        // 获取所有项目分类
        this.getAllCategory();
    },
    methods: {
      // 导出项目
        toexel() {
          commonjudgeExportRole({type:1}).then(res=>{
            if(res.code==200){
               axios
                .get(`/cost/excel/project/ing`, {
                    params: { modelId:this.modelId },
                    headers: {
                        Authorization: `${localStorage.getItem('token')}`
                    },
                    responseType: 'blob'
                })
                .then(result => {
                    const blob = new Blob([result.data], {
                        type: 'application/vnd.ms-excel'
                    });
                    let link = document.createElement('a');
                    link.href = URL.createObjectURL(blob);
                    link.setAttribute('download', '项目成本导出表.xlsx');
                    link.click();
                    link = null;
                    // this.$message.success('导出成功');
                   
                })
                .catch(err => {
                    reject(err);
                });
            }else{
              this.$message.success(res.message);
            }
          })
           
        },
        // 导出细化分解
        toexel2() {
          commonjudgeExportRole({type:2}).then(res=>{

            if(res.code==200){
              axios
                .get(`/cost/excel/project/decomposition`, {
                    params: { projectId:this.clickRow.projectid },
                    headers: {
                        Authorization: `${localStorage.getItem('token')}`
                    },
                    responseType: 'blob'
                })
                .then(result => {
                    const blob = new Blob([result.data], {
                        type: 'application/vnd.ms-excel'
                    });
                    let link = document.createElement('a');
                    link.href = URL.createObjectURL(blob);
                    link.setAttribute('download', '进行中项目-细化分解导出.xlsx');
                    link.click();
                    link = null;
                    
                })
                .catch(err => {
                  this.$message.success(err.message);
                    // reject(err);
                });
            }else{
              this.$message.success(res.message);
            }
          })
            
        },
        //切换模板
        isChecked(index, id) {
            this.isClick = index;
            this.modelId = id;
            this.query.page = 1;
            this.getData();
        },
        //切换月份
        isCheckedmonth(obj, index) {
            this.montClick = index;
            console.log(typeof obj);
            if (typeof obj === 'string') {
                this.MonthlyReport = 0;
                // 调用模板新增接口
                this.showVerify = false;
                this.showConfirm = true;
                this.getReportModelFunc();
            } else this.getSpecifyList(obj.month);
        },
        // 确认评审
        confirmReview() {
            let arr = [];
            this.specifyList.forEach(item => {
                let obj = {};
                obj.monthlyReportId = item.id;
                obj.result = item.state;
                arr.push(obj);
                if (item.modelList) {
                    item.modelList.forEach(items => {
                        let obj1 = {};
                        obj1.monthlyReportId = items.id;
                        obj1.result = items.state;
                        arr.push(obj1);
                        if (items.modelList) {
                            items.modelList.forEach(itemss => {
                                let obj2 = {};
                                obj2.monthlyReportId = itemss.id;
                                obj2.result = itemss.state;
                                arr.push(obj2);
                            });
                        }
                    });
                }
            });
            // console.log(arr)
            // arr = this.unique(arr);
            projectVerifyl({ dataArray: arr }).then(res => {
                if (res.code === 200) {
                    this.$message.success('审评成功');
                    this.getData();
                    this.projectDetailVisible = false;
                } else this.$message.error(res.message);
            });
        },
        // 获取成本细化分解表
        getSpecifyList(month) {
            this.MonthlyReport = 1;
            let params = {
                projectid: this.clickRow.projectid,
                type: 1 // 进行中项目
            };
            if (month !== '汇总') params.month = month;
            projectspecifyList(params).then(res => {
                if (res.code === 200) {
                    this.showConfirm = res.result.showConfirm;
                    let data = res.result;
                    this.specifyListTitle = data.titleList || [];
                    this.showVerify = data.showVerify ? true : false;
                    this.showConfirm = data.showConfirm ? true : false;
                    this.specifyList = data.specifyList || [];
                } else this.$message.error(res.message);
            });
        },
        // 新增月报获取模板
        getReportModelFunc() {
            let params = {
                projectid: this.clickRow.projectid
            };
            projectgetReportModel(params).then(res => {
                if (res.code === 200) {
                    let data = res.result;
                    this.specifyList = data;
                } else this.$message.error(res.message);
            });
        },
        // 新增修改月报
        addMonthlyReport() {
            let params = {
                projectid: this.clickRow.projectid
            };
            let arr = [];
            this.specifyList.forEach(item => {
                console.log(item.modelList);
                let obj = {};
                obj.id = item.id;
                obj.amount = item.monthCost;
                obj.over = item.over;
                obj.needReport = item.needReport
                arr.push(obj);
                if (item.modelList) {
                    item.modelList.forEach(items => {
                        let obj1 = {};
                        obj1.id = items.id;
                        obj1.amount = items.monthCost;
                        obj1.over = items.over;
                        obj1.needReport = items.needReport
                        arr.push(obj1);
                        if (items.modelList) {
                            items.modelList.forEach(itemss => {
                                let obj2 = {};
                                obj2.id = itemss.id;
                                obj2.amount = itemss.monthCost;
                                obj2.over = itemss.over;
                                obj2.needReport = itemss.needReport
                                arr.push(obj2);
                            });
                        }
                    });
                }
            });
            params.dataArray = this.unique(arr);
            // 新增月报
            if (this.MonthlyReport == 0) {
                projectaddMonthlyReport(params).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message.success('月报新增成功');
                        this.projectDetailVisible = false;
                    } else this.$message.error(res.message);
                });
            } else if (this.MonthlyReport == 1) {
                // 修改月报
                projectupdateMonthlyReport(params).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message.success('月报修改成功');
                        this.projectDetailVisible = false;
                    } else this.$message.error(res.message);
                });
            }
        },
        unique(arr) {
            const res = new Map();
            return arr.filter(arr => !res.has(arr.id) && res.set(arr.id, 1));
        },
        // 获取进行中项目列表
        getData() {
            let params = {
                ...this.query,
                modelId: this.modelId
            };
            projectlist(params).then(res => {
                if (res.code === 200) {
                    this.tableData = res.result;
                    this.tableData.projectList.forEach(item => {
                        if (item.decompositionList.length != this.tableData.titleList.length) {
                            let index = this.tableData.titleList.length - item.decompositionList.length;
                            for (var i = 0; i < index; i++) {
                                item.decompositionList.push('');
                            }
                        }
                    });
                    this.query.page = res.result.pageInfo.current;
                    this.pageTotal = res.result.pageInfo.total;
                } else {
                    this.$message.error(res.message);
                    this.tableData = [];
                }
            });
        },

        // 获取模板列表
        getmodellistFunc() {
            getModelList({ type: 1 }).then(res => {
                if (res.code === 200) {
                    this.tableHeadList = res.result;
                    if (this.tableHeadList) {
                        this.modelId = this.tableHeadList[0].id;
                    }
                    this.getData();
                }
            });
        },

        //格式化月报情况
        isState(scope) {
            if (scope === 1) {
                return '待审核';
            } else if (scope === 2) {
                return '驳回';
            } else if (scope === 3) {
                return '已报';
            } else if (scope === 4) {
                return '未报';
            } else if (scope === 5) {
                return '超时';
            }
        },

        // 触发搜索按钮
        handleSearch() {
            this.query.page = 1;
            this.getData();
        },
        //  点击完成
        accomplish(index, row) {
            // 二次确认创建
            this.$confirm(`确定执行【` + row.projectname + `】后，将转移到进行中项目模块？`, {
                customClass: 'newObjectConfirm',
                center: true,
                showClose: false,
                cancelButtonClass: 'newObjectCancel',
                confirmButtonClass: 'newObjectConfirm'
            })
                .then(() => {
                    projectcomplete({ projectid: row.projectid }).then(res => {
                        if (res.code === 200) {
                            this.$message.success('已完成');
                            this.getData();
                        } else {
                            this.$message.error(res.message);
                        }
                    });
                })
                .catch(() => {});
        },
        //点击细化分解
        handleDetail(index, row) {
            this.projectDetailVisible = true;
            this.clickRow = row;
            this.montClick = 0;
            this.getMonthlyReportTitleList(row.projectid);
        },
        // 获取月报标题列表
        getMonthlyReportTitleList(id) {
            projectgetMonthlyReportTitleList({ projectid: id }).then(res => {
                console.log(res);
                if (res.code == 200) {
                    this.monthList = res.result.monthTitleList;
                    this.showPlus = res.result.showReport == 1;
                    this.monthList.unshift({ month: '汇总' });
                    // 模拟点击汇总
                    this.getSpecifyList('汇总');
                } else {
                    this.$message.error(res.message);
                }
            });
        },

        // 分页导航
        handlePageChange(val) {
            this.query.page = val;
            this.getData();
        },
        //点击重置
        reset() {
            (this.query = {
                page: 1,
                type: 1,
                name: '',
                startdate: '',
                categoryId: ''
            }),
                (this.category = '');
            this.getData();
        },
        //取所有项目的分类
        getAllCategory() {
            commongetCategoryList({}).then(res => {
                if (res.code == 200) {
                    this.options = res.result;
                    this.options.filter((item, index) => {
                        item.value = item.id;
                        item.label = item.name;
                        item.children = item.categoryList;
                        item.children.filter((item, index) => {
                            item.value = item.id;
                            item.label = item.name;
                        });
                    });
                } else {
                    this.$message.error(message);
                }
            });
        },
        //点击项目类型
        handleChange(value) {
            (this.query.classifyId = value[0]), (this.query.categoryId = value[1]);
        },
        // 修改分类名称样式
        columnStyle({ row, column, rowIndex, columnIndex }) {
	           if (columnIndex ==0) {   //第三第四列的背景色就改变了2和3都是列数的下标
	          return 'text-align:left;'
	  		  	}else{
              return 'text-align:center'
            }
	   	 },
    },
    components: { vsubmit }
};
</script>

<style scoped lang="scss">
input {
    border: none;
    outline: none;
    background: none;
}
.handle-box {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.title {
    height: 28px;
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    width: 7.8125rem /* 125/16 */;
}
.el-table th > .cell {
    text-align: center;
}

#table {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
}
#table .cell.el-tooltip {
    white-space: nowrap;
    min-width: 50px;
}
#table .cell {
    padding-left: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 23px;
    padding-right: 10px;
}
/deep/.el-table th > .cell {
    text-align: center;
}
// /deep/.el-table .cell {
//     text-align: center;
// }
// /deep/.el-dialog__body .el-table .cell span {
//     text-align: center;
// }
.tabletbody tr:hover > td {
    background-color: #fef6e9;
    color: rgba(0, 79, 171, 1);
    font-size: 14px;
}
.titleBtn {
    background: rgba(33, 74, 143, 1);
    color: #fff;
    border: none;
    font-size: 16px;
    border-radius: 5px;
    height: 35px;
    width: 5.625rem /* 90/16 */;
}
.crps {
    position: absolute;
    right: 0;
    bottom: 0;
}
.titleBtn1 {
    background: rgba(0, 79, 171, 0.2);
    color: rgba(0, 79, 171, 1);
    border: none;
    font-size: 16px;
    border-radius: 5px;
    height: 35px;
    margin-left: 2.5rem /* 40/16 */;
    width: 5.625rem /* 90/16 */;
}
.titleBtn1 a {
    color: #004fab;
}
.titleBtn a {
    color: white;
}
.exportBtn {
    margin-left: 6.875rem; /* 110/16 */
}
.handle-box .name {
    margin-right: 10px;
}
.mr0 {
    font-size: 14px;
    min-width: 234px;
}
.mr20 {
    font-size: 14px;
    // margin-right: 8px;
    min-width: 221px;
}
.handle-select {
    width: 140px;
}
.searchBox {
    display: flex;
    width: 100%;
    justify-content: flex-end;
}
.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.title {
    float: left;
}
.red {
    color: #ff0000;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.tableTitle {
    background: rgba(184, 216, 255, 0.2);
    border: 1px solid rgba(184, 216, 255, 1);
    margin: 0;
    min-width: 80px;
    height: 45px;
}
.history >>> .el-dialog__body {
    padding: 0 20px 30px 30px;
}
.tr1 {
    height: 41px;
}
.tr2 {
    height: 44px;
    background: rgba(184, 216, 255, 0.05);
}
#table {
    width: 100%;
    border-collapse: collapse;
}
#table td {
    border: 1px solid rgba(184, 216, 255, 1);
}
.tdItem {
    text-align: center;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(102, 102, 102, 1);
    height: 40px;
    text-overflow: ellipsis;
    max-width: 200px;
}
.tableBox {
    min-height: 300px;
    width: 100%;
    overflow: auto;
}
.bottomDiv {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    .titleBtn {
        position: relative;
        bottom: -35px;
    }
}
.history/deep/.el-dialog__body {
    max-height: 600px;
    overflow-y: scroll;
}
.progress {
    width: 100%;
    border: 1px solid rgba(184, 216, 255, 1);
    border-top: none;
    box-sizing: border-box;
    height: 60px;
    padding: 0 20px;
    div {
        // width: 300px;
        display: flex;
        height: 60px;
        align-items: center;
        // span {
        //     width: 80px;
        // }
    }
}
.progress/deep/.el-progress__text {
    // width: 50px;
    padding-left: 22px;
}
.tdItem1 {
    width: 140px;
    padding: 0 0 0 10px;
    text-align: left;

    box-sizing: border-box;
}
.el-progress {
    display: flex;
    align-items: center;
}
.handle-box /deep/.el-input--small .el-input__inner {
    height: 35px;
}
.progress/deep/.el-progress-bar {
    width: 339px;
}
.progress/deep/.el-progress__text {
    width: 100% !important;
}
.tdItem/deep/.el-progress-bar {
    width: 144px;
}
.history/deep/.el-dialog__body {
    padding-top: 35px !important;
    padding-bottom: 64px;
}
.selectMonthBox {
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid #004fab;
    margin-bottom: 30px;
    padding-left: 50px;
    box-sizing: border-box;
    flex-wrap: wrap;
    position: relative;
    .monthItem {
        margin-top: 5px;
        min-width: 93px;
        height: 35px;
        background: rgba(255, 255, 255, 1);
        border-radius: 2px;
        border: 1px solid rgba(198, 203, 212, 1);
        text-align: center;
        margin-right: 15px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
    }
}
.timeChecked {
    background: rgba(0, 79, 171, 1) !important;
    color: #fff !important;
    border: 1px solid rgba(0, 79, 171, 1) !important;
}
.cell input{
  text-align:center;
}
</style>
